<script setup lang="ts">
import {useSidebar} from '../composables/sidebar'
import {useBackTop} from '../composables/back-top'
import ToggleSidebarBtn from './subnav/toggle-sidebar-btn.vue'

defineProps<{
  isSidebarOpen: boolean
}>()
defineEmits(['open-menu'])

const {hasSidebar} = useSidebar()
const {shouldShow, scrollToTop} = useBackTop()
</script>

<template>
  <div class="sub-nav py-3 flex items-center">
    <ToggleSidebarBtn
        v-if="hasSidebar"
        :aria-expanded="isSidebarOpen"
        @click="$emit('open-menu')"
    />
    <Transition name="shifting">
      <div
          :class="{ 'go-back-top': true, show: shouldShow }"
          class="height-5"
          @click.prevent.stop="scrollToTop"
      >
        返回顶部
      </div>
    </Transition>
  </div>
</template>
